/*** 图文列表盒子 ***/
.comm-list-box {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx 30rpx 30rpx 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.comm-list-box .item {
    padding: 0rpx 0rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    position: relative;
}

.comm-list-box .bottom-tag {
    background-color: #f2f2f2;
    padding: 6rpx 15rpx;
    border-radius: 8rpx;
}

/* 左大图模式  */
.comm-list-box .item.item-leftbig {
    max-height: 230rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}

.comm-list-box .item-leftbig .leftbig-left {
    width: 200rpx;
    height: 230rpx;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

.comm-list-box .item-leftbig .leftbig-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    margin-right: 20rpx;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding: 15rpx 10rpx;
}

.comm-list-box .item-leftbig .leftbig-right .leftbig-title {
    width: 100%;
    font-size: 34rpx;
    color: #000;
    line-height: 1.5;
    margin-top: 0rpx;
    font-weight: bold;
}

.comm-list-box .item-leftbig .leftbig-desc {
    margin-top: 5rpx;
    font-size: 26rpx;
    color: #666;
    line-height: 1.4;
    height: 107rpx;
    margin-bottom: 10rpx;
}

.comm-list-box .item-leftbig .data {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0rpx;
    color: #bbb;
    font-size: 24rpx;
    position: relative;
    min-height: 40rpx;
}

.comm-list-box .item-leftbig .data .bottom-tag-list {
    margin-top: 0rpx;
    font-size: 24rpx;
}

.comm-list-box .item-leftbig .leftbig-right .bottom-status {
    font-size: 24rpx;
}

/* 大文字模式  */
.comm-list-box .item.item-bigtext {
    height: 220rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #fff;
    color: #333;
    padding: 0 40rpx;
}

.comm-list-box .item-bigtext .left {
    margin-right: 20rpx;
    width: 100rpx;
    height: 100rpx;
    background-color: #fff;
    border-radius: 50%;
}

.comm-list-box .item-bigtext .left image {
    border-radius: 50%;
    width: 100rpx;
    height: 100rpx;
}

.comm-list-box .item-bigtext .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.comm-list-box .item-bigtext .right .bigtext-title {
    width: 100%;
    font-size: 36rpx;
    font-weight: bold;
    text-align: left;
}

.comm-list-box .item-bigtext .right .data-desc {
    width: 100%;
    font-size: 28rpx;
    opacity: 0.7;
}

.comm-list-box .item-bigtext .data-status {
    font-size: 24rpx;
    position: absolute;
    bottom: 10rpx;
    right: 40rpx;
    opacity: 0.8;
}

/* 上下图模式  */
.comm-list-box .item.item-upimg {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #fff;
    color: #000;
    padding: 0 0rpx 10rpx;
    overflow: hidden;
}

.comm-list-box .item-upimg .upimg-title {
    width: 100%;
    font-size: 38rpx;
    font-weight: bold;
    text-align: left;
    padding: 10rpx 20rpx;
}

.comm-list-box .item-upimg image {
    width: 100%;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.comm-list-box .item-upimg .data-desc {
    width: 100%;
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 20rpx;
    max-height: 90rpx;
}

.comm-list-box .item-upimg .data-status {
    width: 100%;
    font-size: 24rpx;
    color: #bbb;
    padding-right: 20rpx;
    text-align: right;
}

/* 左大图模式1  */
.comm-list-box .item.item-leftbig1 {
    max-height: 200rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    margin-bottom: 20rpx;
    padding: 20rpx;
}

.comm-list-box .item-leftbig1 .leftbig-left {
    width: 240rpx;
    height: 160rpx;
    border-radius: 10rpx !important;
    overflow: hidden;
}

.comm-list-box .item-leftbig1 .leftbig-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    height: 160rpx;
}

.comm-list-box .item-leftbig1 .leftbig-right .leftbig-title {
    width: 100%;
    font-size: 34rpx;
    color: #000;
    font-weight: bold;
}

.comm-list-box .item-leftbig1 .leftbig-desc {
    margin-top: 5rpx;
    font-size: 27rpx;
    color: #666;
}

.comm-list-box .item-leftbig1 .data {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #bbb;
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
}

.comm-list-box .item-leftbig1 .data .bottom-tag-list {
    margin-top: 0rpx;
    font-size: 24rpx;
}

.comm-list-box .item-leftbig1 .leftbig-right .bottom-status {
    font-size: 24rpx;
}

/* 左大图模式2  */
.comm-list-box .item.item-leftbig2:first-child {
    margin-top: 60rpx;
}

.comm-list-box .item.item-leftbig2 {
    max-height: 230rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    margin-bottom: 70rpx;
}

.comm-list-box .item-leftbig2 .leftbig-left {
    width: 200rpx;
    height: 250rpx;
    margin-left: 25rpx;
    margin-top: -45rpx;
    border-radius: 10rpx !important;
    overflow: hidden;
}

.comm-list-box .item-leftbig2 .leftbig-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    margin-right: 20rpx;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding: 15rpx 10rpx;
}

.comm-list-box .item-leftbig2 .leftbig-right .leftbig-title {
    width: 100%;
    font-size: 34rpx;
    color: #000;
    line-height: 1.5;
    margin-top: 0rpx;
    font-weight: bold;
}

.comm-list-box .item-leftbig2 .leftbig-desc {
    margin-top: 5rpx;
    font-size: 28rpx;
    color: #666;
    line-height: 1.4;
    height: 107rpx;
    margin-bottom: 10rpx;
}

.comm-list-box .item-leftbig2 .data {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0rpx;
    color: #999;
    font-size: 24rpx;
    position: relative;
    min-height: 40rpx;
}

.comm-list-box .item-leftbig2 .data .bottom-tag-list {
    margin-top: 0rpx;
    font-size: 24rpx;
}

.comm-list-box .item-leftbig2 .leftbig-right .bottom-status {
    font-size: 24rpx;
}

/* 左大图模式3  */
.comm-list-box .item.item-leftbig3:first-child {
    margin-top: 60rpx;
}

.comm-list-box .item.item-leftbig3 {
    max-height: 180rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    margin-bottom: 70rpx;
}

.comm-list-box .item-leftbig3 .leftbig-left {
    width: 190rpx;
    height: 210rpx;
    margin-left: 0rpx;
    margin-top: -30rpx;
    border-radius: 15rpx !important;
    overflow: hidden;
    box-shadow: var(--ShadowSize) var(--greyShadow);
}

.comm-list-box .item-leftbig3 .leftbig-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    margin-right: 20rpx;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding: 15rpx 10rpx;
}

.comm-list-box .item-leftbig3 .leftbig-right .leftbig-title {
    width: 100%;
    font-size: 34rpx;
    color: #000;
    line-height: 1.5;
    margin-top: 0rpx;
    font-weight: bold;
}

.comm-list-box .item-leftbig3 .leftbig-desc {
    margin-top: 5rpx;
    font-size: 28rpx;
    color: #666;
    line-height: 1.4;
    height: 60rpx;
    margin-bottom: 10rpx;
}

.comm-list-box .item-leftbig3 .data {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0rpx;
    color: #999;
    font-size: 24rpx;
    position: relative;
    min-height: 40rpx;
}

.comm-list-box .item-leftbig3 .data .bottom-tag-list {
    margin-top: 0rpx;
    font-size: 24rpx;
}

.comm-list-box .item-leftbig3 .leftbig-right .bottom-status {
    font-size: 24rpx;
}

/*右边/左边图*/
.comm-list-box .item.item-rightpic,
.comm-list-box .item.item-leftpic {
    padding: 40rpx 30rpx 16rpx 40rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
}

.comm-list-box .item-rightpic .title,
.comm-list-box .item-leftpic .title {
    max-height: 88rpx;
    line-height: 44rpx;
    font-size: 34rpx;
    color: #000;
    font-weight: bold;
    z-index: 999;
}

.comm-list-box .item-rightpic .desc,
.comm-list-box .item-leftpic .desc {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.comm-list-box .item-rightpic .desc text,
.comm-list-box .item-leftpic .desc text {
    max-height: 120rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    color: #666;
    flex: 1;
}

.comm-list-box .item-rightpic .desc .pic {
    margin-left: 15rpx;
    width: 180rpx;
    height: 122rpx;
    border-radius: 10rpx;
}

.comm-list-box .item-leftpic .desc .pic {
    margin-left: 0rpx;
    margin-right: 15rpx;
    width: 180rpx;
    height: 122rpx;
    border-radius: 10rpx;
}

.comm-list-box .item-rightpic .data,
.comm-list-box .item-leftpic .data {
    height: 24rpx;
    line-height: 24rpx;
    font-size: 24rpx;
    color: #bbb;
    margin-top: 30rpx;
    display: flex;
    justify-self: center;
    align-items: center;
}

/*横向*/
.comm-list-scroll {
    width: 100%;
    margin-top: 10rpx;
    background-color: #fff;
    white-space: nowrap;
}

.comm-list-scroll .item-scroll {
    display: inline-block;
    padding: 10rpx 25rpx 10rpx 0rpx;
}

.comm-list-scroll .item-scroll image {
    width: 300rpx;
    height: 185rpx;
    border-radius: 10rpx;
}

.comm-list-scroll .item-scroll .title {
    font-size: 28rpx;
    width: 300rpx;
    height: 40rpx;
    color: #000;
}

/*瀑布流*/
.comm-list-flow {
    margin-top: 10rpx;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20rpx;
}

.comm-list-flow .item-flow {
    width: 50%;
    padding: 10rpx 15rpx 20rpx;
}

.comm-list-flow .item-flow .item-flow-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.comm-list-flow .item-flow .item-flow-inner image {
    width: 100%;
    height: 420rpx;
    border-radius: 10rpx;
}

.comm-list-flow .item-flow .item-flow-inner .title-flow {
    width: 100%;
    text-align: left;
    color: #333;
    font-size: 28rpx;
    font-weight: bold;
    margin-top: 20rpx;
}

/*文字条目*/
.comm-list-box .item-line {
    width: 100%;
    background-color: #fff;
    padding: 30rpx 20rpx;
    display: flex;
    border-bottom: 1rpx solid #ddd;
    justify-content: center;
}

.comm-list-box .item-line:last-child {
    border-bottom: unset;
}

.comm-list-box .item-line .left {
    flex: 1;
    display: flex;
    align-items: center;
}

.comm-list-box .item-line .left .order {
    min-width: 50rpx;
    padding: 0 10rpx;
    height: 35rpx;
    display: flex;
    margin-right: 10rpx;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    border-bottom-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
}

.comm-list-box .item-line .left .title {
    flex: 1;
    font-size: 34rpx;
    color: #000;
}

.comm-list-box .item-line .right {
    width: 40rpx;
    font-size: 26rpx;
    text-align: right;
    color: #999;
}
